<template>
	<view class="page">
		<view class="Release_box">
			<form @submit="" @reset="">
				<view class="release_title">
					姓名：<input type="text" placeholder="请输入姓名" placeholder-style="font-size:32rpx;color:#B3B3B3" v-model="formData.name" maxlength="15" />
				</view>
				<view class="release_title">
					身份证号：<input type="text" placeholder="请输入身份证号" v-model="formData.phone" placeholder-style="font-size:32rpx;color:#B3B3B3" maxlength="15" />
				</view>
				<view class="release_title">
					手机号：<input type="text" placeholder="请输入手机号" v-model="formData.phone" placeholder-style="font-size:32rpx;color:#B3B3B3" maxlength="15" />
				</view>
				<view class="release_postion"  @click='handelAddress'>
					所在地区： <input type="text" placeholder="请选择地址" v-model="formData.address" disabled="true" placeholder-style="font-size:32rpx;color:#565656" maxlength="15" />
					<view class="position_icon"  >
						<uni-icons type="location-filled" size="20"></uni-icons>
					</view>
				</view>
				<view class="detailed">
					<view class="detailed_title">
						详细信息：
					</view>
					<view class="detailed_box">
						<textarea v-model="formData.addressDetail" placeholder="请填写详细地址" />
					</view>
				</view>
				<view class="release_title">
					接单范围：<input type="text" placeholder="接单范围" v-model="formData.phone" placeholder-style="font-size:32rpx;color:#B3B3B3" maxlength="15" />
					<view class="position_icon"  >
						km
					</view>
				</view>
				<view class="release_title" @click="handleItem">
					服务项目：<view>点击选择</view> <uni-icons class="position_icon" type="forward" size="24" color="#b3b3b3"></uni-icons>
				</view>
				<view class="common_item common_item_item clearfix">
					<text>理发</text>
					<text>洗脚</text>
					<text>买菜做饭</text>
					<text>定期探望</text>
					<text>陪床护理</text>
					<text>假牙护理</text>
					<text>室内保洁</text>
				</view>
				<view class="release_title release_title_none">
					上传头像
				</view>
				<view class="teacher_avatar vCenter">
					<image class="upImg" v-if="!formData.faceImage" src="/static/img/upImg.png"></image>
					<image class="result" v-if="formData.faceImage" :src="formData.faceImage" mode="widthFix"></image>
				</view>
				<view class="certification_pic_box">
					<view class="certification_pic_title">
						上传手持身份证正反面：
					</view>
					<view class="certification_pic">
						<view class="certification_pic_left " @click="upload_img" data-face="0">
							<view class="upload_img vCenter">
								<image class="upImg" v-if="!formData.faceImage" src="/static/img/upImg.png"></image>
								<image class="result" v-if="formData.faceImage" :src="formData.faceImage" mode="widthFix"></image>
							</view>
						</view>
						<view class="certification_pic_right" @click="upload_img" data-face="1">
							<view class="upload_img vCenter">
								<image class="upImg" v-if="!formData.unfaceImage" src="/static/img/upImg.png"></image>
								<image class="result" v-if="formData.unfaceImage" :src="formData.unfaceImage" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="certification_pic_box">
					<view class="certification_pic_title">
						上传技能证书(如服务项目不需要可不传)：
					</view>
					<view class="certification_pic">
						<view class="certification_pic_left " @click="upload_img" data-face="0">
							<view class="upload_img vCenter">
								<image class="upImg" v-if="!formData.faceImage" src="/static/img/upImg.png"></image>
								<image class="result" v-if="formData.faceImage" :src="formData.faceImage" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="certification_pic_box">
					<view class="certification_pic_title">
						上传健康证明(如服务项目不需要可不传)：
					</view>
					<view class="certification_pic">
						<view class="certification_pic_left " @click="upload_img" data-face="0">
							<view class="upload_img vCenter">
								<image class="upImg" v-if="!formData.faceImage" src="/static/img/upImg.png"></image>
								<image class="result" v-if="formData.faceImage" :src="formData.faceImage" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</form>

		</view>
		<view class="bt">立即入住</view>
	</view>
</template>

<script>
	// 下拉列表框
	import lbPicker from "@/components/my/lb-picker";
	import area from "@/common/area-data-min.js"
	export default {
		components: {
			lbPicker
		},
		data() {
			return {
				// 引入的地区列表
				formData: {}
			}
		},
		// 获取需求大厅的需求名字
		onLoad() {},
		methods: {
			// 打开时间列表
			handelAddress () {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log(res)
								uni.chooseLocation({
									latitude: res.latitude,
									longitude: res.longitude,
									success: e => {
										console.log(e)
										this.$set(this.formData, 'address', e.name?e.name:e.address)
									},
									fail: function(t) {}
								});
							}
						});
					},
					fail(err) { // 这里用户点取消了
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			upload_img (e) {
				let _this = this
				uni.chooseImage({
				  count:1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.getFileSystemManager().readFile({   // 转base64
							    filePath: tempFilePaths[0], //选择图片返回的相对路径
							    encoding: 'base64', //编码格式
							    success: res => { //成功的回调
								// 上传的图片路径
							        let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
											_this.$set(_this.formData, 'faceImage', base64)
											
							    }
							})	
					}
				});
			},
			handleItem () {
				uni.navigateTo({
					url:'/pages/my/my_service/add_orderItem'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		overflow: hidden;
		background: #fff;
	}

	.Release_box {
		padding: 33rpx;
		box-sizing: border-box;
		margin-bottom: 50rpx;
		.release_title,
		.release_postion{
			position: relative;
			display: flex;
			padding-bottom: 33rpx;
			margin-bottom: 33rpx;
			color: #B3B3B3;
			font-size: 32rpx;
			border-bottom: 1px solid rgba($color: #999, $alpha: 0.2);
			input  {
				position: relative;
				z-index: 0;
				flex: 1;
				color: #565656;
				font-size: 32rpx;
			}
			.position_icon {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
			}
		}
		.release_title_none {
			border-bottom: none;
			margin: 0;
		}
		.teacher_avatar {
			width: 133rpx;
			height: 133rpx;
			margin-bottom: 33rpx;
			background: #E9E9E9;
			.upImg {
				width: 69rpx;
				height: 69rpx;
			}
			.result {
				width: 100%;
				min-height: 100%;
			}
		}
		.detailed {
			.detailed_title {
				color: #B3B3B3;
				font-size: 32rpx;
			}
			margin-bottom: 33rpx;
			.detailed_box {
				width: 100%;
				margin-top: 20rpx;
				textarea {
					width: 100%;
					height: 100rpx;
					margin-top: 20rpx;
					font-size: 26rpx;
					padding: 15rpx;
					box-sizing: border-box;
					color: #565656;
					font-size: 32rpx;
					border: 1px solid rgba($color: #999, $alpha: 0.2);
				}
			}

		}
		.release_switch {
			display: block;
			position: relative;
			top: -10rpx;
			border-bottom: none;
		}
	}
	.certification_pic_box {
		line-height: 60rpx;
		.certification_pic_title {
			line-height: 100%;
			margin-bottom: 33rpx;
			font-size: 32rpx;
			color: #B3B3B3;
		}
	
		.certification_pic {
			display: flex;
			justify-content: space-between;
			margin-bottom: 33rpx;
			.upload_img {
				width: 325rpx;
				height: 244rpx;
				.result {
					width: 100%;
					height: 100%;
				}
			}
			.certification_pic_left {
				width: 325rpx;
				height: 244rpx;
				background: #E9E9E9;
				.upImg {
					width: 125rpx;
					height: 125rpx;
				}
			}
	
			.certification_pic_right {
				width: 325rpx;
				height: 244rpx;
				background: #E9E9E9;
				.upImg {
					width: 125rpx;
					height: 125rpx;
				}
			}
		}
	
	}
	.common_item_item {
		display: block;
		padding: 0;
		text {
			float: left;
			height: 36rpx;
			margin-right: 25rpx;
			margin-bottom: 28rpx;
			padding: 0 16rpx;
			line-height: 34rpx;
			text-align: center;
			font-size: 26rpx;
			color: #368AFF;
			border-radius:18rpx;
			border:1px solid rgba(54,138,255,1);
		}
	}
	.bt {
		width:683rpx;
		height:100rpx;
		margin: 0 auto 117px;
		line-height: 100rpx;
		text-align: center;
		background:rgba(54,138,255,1);
		border-radius:50rpx;
		border:1px solid rgba(151,151,151,.1);
		color: #fff;
		font-size: 36rpx;
	}

</style>
